<template>
  <div ref="chartContent" class="chartContent" />
</template>
<script>
import * as echarts from 'echarts';
export default {
  props:{
    option:{
      type: Object,
      default:() => {
        return {}
      }
    }
  },
  data(){
    return { };
  },
  watch:{
    option:{
      handler(){
        this.$nextTick(() => {
          this.initChart();
        })
      },
      deep:true,
      immediate:true
    }
  },
  methods:{
    //初始化echarts数据
    initChart(){
      const _this = this;
      this.chart = echarts.init(this.$refs.chartContent);
      this.chart.setOption(this.option,true);
      window.onresize = window.addEventListener('resize',function(){
        _this.chart.resize();
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.chartContent{
	width: 100%;
	height: 100%;
}
</style>
